<template>
  <div>
    <div class="moveControlWrap" ref="moveControlWrap" >
      <div class="infoSearchOneWrap">
        <el-row :gutter="0">
          <el-col :span="8">
            <el-row :gutter="0">
              <el-col :xs="10" :sm="8" :md="5" :lg="5">
                <span style="vertical-align: middle;line-height: 28px;margin-left: 10px;">行政区域:</span>
              </el-col>
              <el-col :xs="12" :sm="14" :md="18" :lg="18">
                <el-row>
                  <el-col :span="12">
                    <el-select v-model="searchInfo.districtId" :disabled="$store.state.userInfo.regionId?true:false"  size="mini" clearable placeholder="全部">
                      <el-option
                        v-for="item in $store.state.districtData"
                        :key="item.districtId"
                        :label="item.districtName"
                        :value="item.districtId">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select v-model="searchInfo.streetId"  size="mini" clearable placeholder="全部">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <div class="searchWrap">
                <el-row :gutter="0">
                  <el-col :xs="12" :sm="10" :md="7" :lg="7">
                    <span >所属企业:</span>
                  </el-col>
                  <el-col :xs="12" :sm="14" :md="15" :lg="15">
                    <el-select v-model="searchInfo.enterpriseId" size="mini" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseId+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseId+''">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple">
              <div class="searchWrap">
                <el-row :gutter="30">
                  <el-col :xs="12" :sm="10" :md="3" :lg="3">
                    <span class="searchFont">时间：</span>
                  </el-col>
                  <el-col :xs="12" :sm="14" :md="20" :lg="20">
                    <div class="grid-content bg-purple">
                      <div class="block">
                        <el-date-picker
                          style="width: 100%"
                          v-model="value6"
                          type="daterange"
                          align="left"
                          placeholder="选择日期范围"
                          size="mini"
                          :picker-options="pickerOptions2">
                        </el-date-picker>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <div style="float: right;">
            <el-button type="primary" size="mini" @click="searchEleInfo()">查询</el-button>
          </div>
        </el-row>
      </div>
      <div style="background-color: white;border-radius: 5px;padding: 10px;">
        <mapBicycletest ></mapBicycletest>
      </div>

    </div>
  </div>

</template>

<script>

  import mapBicycletest from "./mapHotMavp.vue"
  export default {
    props:[],
    data(){
      return {
        searchInfo:{
          currentParking:"",
        },
        options: [{
          value: '1',
          label: '粤海街道'
        },],
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value6:"",
        currentParking:"",
        urgentCounts:" "
      }
    },
    components: {
      mapBicycletest
    },
    created(){
      this.$emit('getuserSession')
    },
    methods: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
    .moveControlWrap
      page()
      .infoSearchOneWrap
        width 100%
        margin-bottom 10px
        background-color white
        border-radius 5px
        padding 15px 20px 15px 20px;
        box-sizing border-box
        .searchWrap
          white-space nowrap
          overflow hidden
          font-size 14px
          line-height 28px
          width 100%
          .searchFont
            margin-left 5px
            font-size 14px
            color #50545D
            font-family SourceHanSansCN-Medium
</style>
